<template>
  <div class="categora">
    <div class="orders-hd">
      <div class="hd-item" @click="cateClick(item.id)" :class="[selectId == item.id?'selected':'']" v-for="(item,index) in cateArr" :key="index">{{item.categoryName}}
      </div>
    </div>
    <div class="cate_bd">
      <div class="bd-left">
        <div
          @click="goodClick(item.id)"
          v-for="(item,index) in cateParentArr"
          :key="index"
          :class="['bd-left-item',{'active':activeIndex == item.id}]"
        >
          <img
            v-if="activeIndex == item.id"
            src="../../images/border.jpg"
            alt=""
          >
          {{item.categoryName}}
        </div>
      </div>
      <div class="bd-right">
        <div
          v-if="cateParentArr.length"
          v-for="(item,index) in goodArr"
           @click="linkToDetail(item.id,item.categoryName)"
          :key="index"
          class="box-item"
        >
          <div class="box-item_img">
            <div
              class="img"
              :style="{backgroundImage:'url(' +item.imageUrl+')'}"
            ></div>
          </div>
          <div class="box-item_text">{{item.categoryName}}</div>
        </div>
        <div
          v-if="!goodArr.length"
          class="no-data"
        >
          当前数据为空~
        </div>
      </div>
    </div>

    <tabbar></tabbar>
  </div>
</template>
<script>
import tabbar from "../common/tabbar";
import search from "../common/search";
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
export default {
  components: {
    tabbar,
    search
  },
  data() {
    return {
      cateArr: [],
      cateParentArr: [],
      activeIndex: "",
      type:'',
      selectId:'',
      goodArr:[]
    };
  },
  mounted() {
    this.type = this.$router.currentRoute.query.type;
    this.cateGory();
  },
  methods: {
    linkToDetail(id,name){
      this.$router.push({
        path: "searchResult",
        query: { parentId:this.activeIndex,id: id, name: name,type:'all',all:'all'}
      });
    },
    cateClick(id) {
      this.selectId = id
      this.$vux.loading.show({
        text: "加载中"
      });
      let param = {
        isEnable: "y",
        pageIndex: 1,
        pageSize: 1000,
        parentId: id
      };
      let url = CONSTANT.LIST.CATEGORYLIST;
      common.post(url, param, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.cateParentArr = res.data.bussData;
          this.activeIndex = this.cateParentArr.length?this.cateParentArr[0].id:'';
          if(this.cateParentArr.length){
            let id = this.cateParentArr[0].id
            this.activeIndex = id
            this.goodClick(id)
          }
        }
      });
    },
    goodClick(id){
      let param = {
        isEnable: "y",
        pageIndex: 1,
        pageSize: 1000,
        parentId: id,
        // firstParentId:id
      };
      this.activeIndex = id
      let url = CONSTANT.LIST.CATEGORYLIST;
      common.post(url, param, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.goodArr = res.data.bussData
        }
      });
    },
    cateGory() {
      this.$vux.loading.show({
        text: "加载中"
      });
      let param = {
        isEnable: "y",
        pageIndex: 1,
        pageSize: 1000,
        parentId: 0
      };
      let url = CONSTANT.LIST.CATEGORYLIST;
      common.post(url, param, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.cateArr = res.data.bussData;
          if(this.cateArr.length){
            let id;
            if(this.type){
              this.cateArr.map(item=>{
                if(item.id == this.type){
                  id = item.id;
                }
              })
            }else{
             id = this.cateArr[0].id;
            }
            this.selectId = id;
            this.cateClick(id)
          }
        }
      });
    }
  }
};
</script>
<style lang="less">
.categora {
  position: relative;
  background-color: #fff;
  padding: 0;
  height: 100%;
  .orders-hd{
      display: flex;
      flex-direction: row;
      height:1;
      align-items:center;
      justify-content: space-between;
      background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
      border-bottom:.01rem solid rgba(238,238,238,.8);
      position: fixed;
      height: 1rem;
      width: 100%;
      left: 0;
      right: 0;
      .hd-item{
        position: relative;
        height:100%;
        flex: 1;
        line-height:1rem;
        font-size:.28rem;
        font-family:PingFang-SC-Medium;
        color:#fff;
        font-weight: 500;
        text-align: center;
      }
      .selected{
        color:#ddd;
      }
      .selected:after{
        content: '';
        width:.6rem;
        background-color:#FF7268;
        height:.03rem;
        position: absolute;
        bottom: 0;
        margin-left:auto;
        margin-right:auto;
        left:0;
        right:0;
        border-radius:.02rem;
      }
    }
  .cate_bd {
    position: fixed;
    top: 1rem;
    left: 0;
    right: 0;
    bottom: 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
    // padding-top: 1rem;
    .bd-left {
      position: absolute;
      display: block;
      display: flex;
      flex-direction: column;
      width: 2rem;
      bottom: 0;
      overflow-y: auto;
      top: 0;
      .bd-left-item {
        width: 100%;
        display: block;
        // flex: 1;
        line-height: 1.02rem;
        height: 1.02rem;
        font-size: 0.28rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: rgba(153, 153, 153, 1);
        text-align: center;
        &.active {
          color: rgba(0, 0, 0, 1);
          display: inline-block;
          background-color: RGBA(240, 240, 240, 1);
          img {
            position: absolute;
            width: 0.04rem;
            height: 0.99rem;
            left: 0;
          }
        }
      }
    }
    .bd-right {
      height: 100%;
      box-sizing: border-box;
      position: absolute;
      left: 2rem;
      width: 6rem;
      padding: 0.26rem 0 0.14rem 0.23rem;
      background-color: RGBA(250, 250, 250, 1);
      display: inline-block;
      min-height: 100%;
      .no-data {
        position: relative;
        left: -.5rem;
        text-align: center;
        font-size: 0.28rem;
        font-family: PingFang-SC-Bold;
        color: rgba(153, 153, 153, 1);
        margin-top: 40%;
      }
      .box-item {
        width: 2.5rem;
        display: inline-block;
        margin-right: .1rem;
        .box-item_img {
          display: block;
          // background: rgba(255, 255, 255, 1);
          border-radius: 0.15rem;
          width: 2.5rem;
          height: 2.2rem;
          .img {
            width: 2rem;
            height: 2rem;
            background-size: 100%;
            background-image: url('../../images/no-data.png');
            background-repeat: no-repeat;
            border-radius: .08rem;
            margin: 0 auto;
          }
        }
        .box-item_text {
          margin: 0.14rem auto;
          font-size: 0.28rem;
          line-height: 0.26rem;
          font-family: PingFang-SC-Bold;
          font-weight: bold;
          color: rgba(153, 153, 153, 1);
          text-align: center;
        }
      }
    }
  }
}
</style>

